<template>
	<div>
		<!-- 移动 -->
		<div class="row">
			<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
				<div class="panel bk-widget bk-border-off bk-noradius">
					<div class="bk-bg-white bk-fg-success bk-ltr bk-padding-40" style="height:210px;">
						<div class="row">
							<div class="col-xs-4 text-left bk-vcenter bk-padding-off">
										<span class="bk-round bk-border-off bk-icon bk-icon-3x mobile-logo">
											<!--<i class="fa fa-download fa-3x"></i>-->
										</span>
							</div>
							<div class="col-xs-8 text-center bk-vcenter" v-if="roleInfo.role !== 'ROLE_ADMIN' && roleInfo.role !== 'ROLE_SALES_DIRECTOR'">
								<h6 class="bk-margin-off">卡片总数</h6>
								<h4 class="bk-margin-off">{{cardTotal.activeCount || 0}}</h4>
							</div>
							<div class="col-xs-4 text-center bk-vcenter" v-if="roleInfo.role === 'ROLE_ADMIN' || roleInfo.role === 'ROLE_SALES_DIRECTOR'">
								<h6 class="bk-margin-off">已划拨</h6>
								<h4 class="bk-margin-off">{{cardTotal.activeCount || 0}}</h4>
							</div>
							<div class="col-xs-4 text-center bk-vcenter" v-if="roleInfo.role === 'ROLE_ADMIN' || roleInfo.role === 'ROLE_SALES_DIRECTOR'">
								<h6 class="bk-margin-off">待划拨</h6>
								<h4 class="bk-margin-off">{{cardTotal.idleCount || 0}}</h4>
							</div>
						</div>
						<div class="progress bk-margin-off-bottom bk-margin-top-10 bk-noradius" style="height: 6px;">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
								<span class="sr-only">50% </span>
							</div>
						</div>
						<div class="bk-margin-top-10">
							<div class="row">
								<div class="col-xs-6">
									<small>本月到期卡片数量: {{cardTotal.expiredCount || 0}}</small>
								</div>
								<div class="col-xs-6 text-right">
									<router-link class="bk-fg-success bk-fg-darken" to="/mobileInfo"><small>View details</small> <i class="fa fa-database"></i></router-link>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
				<div class="panel bk-widget bk-border-off bk-noradius" style="height:210px;background-color: #fff;">
					<div class="panel-body bk-bg-white text-center bk-fg-info bk-padding-top-15 bk-padding-bottom-15">
						<div class="row">
							<div class="col-xs-8 text-left bk-vcenter">
								<div class="">
									<h4 class="bk-margin-off" style="font-weight: 500; color:#0085d0">卡片状态统计</h4>
								</div>
							</div>
							<div class="col-xs-4 bk-vcenter text-right">
								<i class="fa fa-globe fa-4x"></i>
							</div>
						</div>
					</div>
					<div class="list-group">
						<a href="#" class="list-group-item">
							<div class="row">
								<div class="col-xs-3">
									待激活
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-success bk-noradius">{{cardTotal.paCount || 0}}张</span>
								</div>
								<div class="col-xs-3">
									预约销户
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-danger bk-noradius">0张</span>
								</div>
							</div>
						</a>
						<a href="#" class="list-group-item">
							<div class="row">
								<div class="col-xs-3">
									已激活
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-warning bk-noradius">{{cardTotal.norCount || 0}}张</span>
								</div>
								<div class="col-xs-3">
									失效
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-info bk-noradius">0张</span>
								</div>
							</div>
						</a>
						<a href="#" class="list-group-item">
							<div class="row">
								<div class="col-xs-3">
									停卡
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-primary bk-noradius">{{cardTotal.offCount || 0}}张</span>
								</div>
								<!--<div class="col-xs-3">
									更换状态
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-dark bk-noradius">12张</span>
								</div>-->
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>

		<!-- 联通 -->
		<div class="row" v-if="isOpen">
			<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
				<div class="panel bk-widget bk-border-off bk-noradius">
					<div class=" bk-bg-white bk-fg-danger bk-ltr bk-padding-40" style="height:210px;">
						<div class="row">
							<div class="col-xs-4 text-left bk-vcenter bk-padding-off">
										<span class="bk-round bk-border-off bk-icon bk-icon-3x unicom-logo">
											<!--<i class="fa fa-download fa-3x"></i>-->
										</span>
							</div>
							<div class="col-xs-8 text-center bk-vcenter">
								<h6 class="bk-margin-off">卡片总数</h6>
								<h4 class="bk-margin-off">58</h4>
							</div>
						</div>
						<div class="progress bk-margin-off-bottom bk-margin-top-10 bk-noradius" style="height: 6px;">
							<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
								<span class="sr-only">50% </span>
							</div>
						</div>
						<div class="bk-margin-top-10">
							<div class="row">
								<div class="col-xs-6">
									<small>本月到期卡片数量: 0</small>
								</div>
								<div class="col-xs-6 text-right">
									<a href="#" class="bk-fg-danger bk-fg-darken"><small>View details</small> <i class="fa fa-database"></i></a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
				<div class="panel bk-widget bk-border-off bk-noradius" style="height:210px;background-color: #fff;">
					<div class="panel-body bk-bg-white text-center bk-fg-info bk-padding-top-15 bk-padding-bottom-15">
						<div class="row">
							<div class="col-xs-8 text-left bk-vcenter">
								<div class="">
									<h4 class="bk-margin-off" style="font-weight: 500; color:#d9534f">卡片状态统计</h4>

								</div>
							</div>
							<div class="col-xs-4 bk-vcenter text-right">
								<i class="fa fa-globe fa-4x"></i>
							</div>
						</div>
					</div>
					<div class="list-group">
						<a href="#" class="list-group-item">
							<div class="row">
								<div class="col-xs-3">
									测试
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-success bk-noradius">0张</span>
								</div>
								<div class="col-xs-3">
									预约销户
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-danger bk-noradius">0张</span>
								</div>
							</div>
						</a>
						<a href="#" class="list-group-item">
							<div class="row">
								<div class="col-xs-3">
									已激活
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-warning bk-noradius">15张</span>
								</div>
								<div class="col-xs-3">
									失效
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-info bk-noradius">0张</span>
								</div>
							</div>
						</a>
						<a href="#" class="list-group-item">
							<div class="row">
								<div class="col-xs-3">
									停卡
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-primary bk-noradius">112张</span>
								</div>
								<!--<div class="col-xs-3">
									更换状态
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-dark bk-noradius">12张</span>
								</div>-->
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>
		<!-- 电信 -->
		<div class="row" v-if="isOpen">
			<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
				<div class="panel bk-widget bk-border-off bk-noradius">
					<div class=" bk-bg-white bk-fg-primary bk-ltr bk-padding-40" style="height: 210px;">
						<div class="row">
							<div class="col-xs-4 text-left bk-vcenter bk-padding-off">
										<span class="bk-round bk-border-off bk-icon bk-icon-3x telecom-logo">
											<!--<i class="fa fa-download fa-3x"></i>-->
										</span>
							</div>
							<div class="col-xs-8 text-center bk-vcenter">
								<h6 class="bk-margin-off">卡片总数</h6>
								<h4 class="bk-margin-off">0</h4>
							</div>
						</div>
						<div class="progress bk-margin-off-bottom bk-margin-top-10 bk-noradius" style="height: 6px;">
							<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
								<span class="sr-only">50% </span>
							</div>
						</div>
						<div class="bk-margin-top-10">
							<div class="row">
								<div class="col-xs-6">
									<small>本月到期卡片数量: 0</small>
								</div>
								<div class="col-xs-6 text-right">
									<a href="#" class="bk-fg-primary bk-fg-darken"><small>View details</small> <i class="fa fa-database"></i></a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
				<div class="panel bk-widget bk-border-off bk-noradius" style="height:210px;background-color: #fff;">
					<div class="panel-body bk-bg-white text-center bk-fg-info bk-padding-top-15 bk-padding-bottom-15">
						<div class="row">
							<div class="col-xs-8 text-left bk-vcenter">
								<div class="">
									<h4 class="bk-margin-off" style="font-weight: 500; color:#34495E">卡片状态统计</h4>

								</div>
							</div>
							<div class="col-xs-4 bk-vcenter text-right">
								<i class="fa fa-globe fa-4x"></i>
							</div>
						</div>
					</div>
					<div class="list-group">
						<a href="#" class="list-group-item">
							<div class="row">
								<div class="col-xs-3">
									测试
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-success bk-noradius">0张</span>
								</div>
								<div class="col-xs-3">
									预约销户
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-danger bk-noradius">0张</span>
								</div>
							</div>
						</a>
						<a href="#" class="list-group-item">
							<div class="row">
								<div class="col-xs-3">
									已激活
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-warning bk-noradius">0张</span>
								</div>
								<div class="col-xs-3">
									失效
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-info bk-noradius">0张</span>
								</div>
							</div>
						</a>
						<a href="#" class="list-group-item">
							<div class="row">
								<div class="col-xs-3">
									停卡
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-primary bk-noradius">0张</span>
								</div>
								<!--<div class="col-xs-3">
									更换状态
								</div>
								<div class="col-xs-3 text-right">
									<span class="label label-dark bk-noradius">12张</span>
								</div>-->
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>

		<!-- 最新公告 -->
		<div class="row">
			<div class="col-md-12">
				<div class="panel bk-widget bk-border-off bk-noradius bk-webkit-fix">
					<div class="panel-body bk-bg-very-light-gray text-center bk-padding-top-10 bk-padding-bottom-10">
						<div class="row">
							<div class="col-xs-8 text-left bk-vcenter">
								<h6 class="bk-margin-off"><i class="fa fa-bullhorn"></i> 最新公告</h6>
							</div>
							<div class="col-xs-4 bk-vcenter text-right">
								<a class="right carousel-control bk-carousel-control bk-carousel-control-white bk-carousel-left" href="#carousel-example-generic2" role="button" data-slide="prev">
									<span class="fa fa-arrow-circle-o-left icon-prev"></span>
								</a>
								<a class="right carousel-control bk-carousel-control bk-carousel-control-white bk-carousel-right" href="#carousel-example-generic2" role="button" data-slide="next">
									<span class="fa fa-angle-right icon-next"></span>
								</a>
							</div>
						</div>
					</div>
					<hr class="bk-margin-off">
					<div class="bs-example">
						<div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
							<div class="carousel-inner">
								<div v-for="(items, index) in noticeItem" class="item" :class="{'active': index===0}">
									<a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-padding-off-top bk-padding-off-bottom">

										<p style="padding: 10px;">
											<small>{{ items.content }}</small>
										</p>
									</a>
									<hr class="bk-margin-off">
									<div class="panel-body bk-bg-very-light-gray bk-padding-5 text-center">
										<router-link to="/notice" class="bk-fg-primary bk-fg-lighten"><small><i class="fa fa-file-text-o"></i> 查看更多</small></router-link>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>
<script>

	import {mapGetters} from 'vuex'
	import _ from 'lodash'

	export default{
		name: 'home',
		computed: {
			...mapGetters({
				navStatus: 'getNavStatus',
				roleInfo: 'getRoleInfo',
				noticeList: 'getNoticeList',
				cardTotal: 'getCardCMCCTotal'
			}),
			noticeItem () {
				return _.orderBy(this.noticeList.result, ['id'], ['desc'])
			}
		},
		data () {
			return {
				endPage: 1,
				isOpen: 0
			}
		},
		methods: {
		},
		mounted () {

			// 角色
			this.$store.dispatch('fetchRole')

			// 最新公告
			let params = {
				page: 1
			}
			this.$store.dispatch('fetchHomeNotice')

			// 卡统计
			this.$store.dispatch('fetchCardStatistics')


		},
		components: {
		}
	}
</script>

<style>

</style>